<template>
  <div class="chartsStyle" ref="mainRef1"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const mainRef1 = ref();

const chart1 = () => {
  var chartDom = mainRef1.value;
  // @ts-ignore
  var myChart = echarts.init(chartDom);
  var option = {
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisLabel: {
        color: "#fff", // 设置x轴文字颜色为白色
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff", // 设置y轴文字颜色为白色
      },
    },
    grid: {
      x: "50px",
      y: "50px",
      x2: "50px",
      y2: "50px",
    },
    series: [
      {
        data: [1189, 788, 383, 1049, 228, 646, 541, 607, 252, 786, 1084, 347],
        type: "bar",
        showBackground: false, // 改为false去掉背景色
        itemStyle: {
          normal: {
            color: "#2A95FC",
          },
        },
        barWidth: "50%", // 控制柱子宽度
        barGap: "30%", // 控制柱子之间的间距
      },
    ],
  };
  option && myChart.setOption(option);
};

onMounted(() => {
  setTimeout(() => {
    chart1();
  }, 500);
});
</script>
<style scoped>
/* 添加图表容器样式 */
.chartsStyle {
  width: 100%;
  height: 100%; /* 或固定高度如400px */
}
</style>
